<template>
  <div class="bg-white rounded-xl shadow-custom p-6">
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-lg font-semibold text-gray-800">最近添加的植物</h3>
      <router-link to="/plants" class="text-sm text-primary hover:text-primary/80 transition-custom">查看全部</router-link>
    </div>
    <div class="space-y-4">
      <div 
        v-for="plant in plants" 
        :key="plant.id"
        class="flex items-center p-3 border border-gray-100 rounded-lg hover:bg-gray-50 transition-custom cursor-pointer"
        @click="viewPlant(plant)"
      >
        <img :src="plant.image" :alt="plant.name" class="w-12 h-12 rounded-lg object-cover">
        <div class="ml-4">
          <h4 class="font-medium text-gray-800">{{ plant.name }}</h4>
          <p class="text-sm text-gray-500">{{ plant.date }}</p>
        </div>
        <button class="ml-auto text-primary hover:text-primary/80 transition-custom">
          <i class="fa fa-arrow-right"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RecentPlants',
  props: {
    plants: {
      type: Array,
      required: true
    }
  },
  methods: {
    viewPlant(plant) {
      this.$router.push({
        name: 'PlantDetail',
        params: { id: plant.id }
      })
    }
  }
}
</script> 